<template>
    <div class="header">
        <el-row :gutter="20">
            <el-col :span="2">
                <el-icon color="#D9A914" size="22px" @click="change">
                    <Fold v-if="isCollapse === true" />
                    <Expand v-else />
                </el-icon>
                &nbsp;
                <el-icon color="#D9A914" size="22px">
                    <Refresh />
                </el-icon>
            </el-col>
            <el-col :span="8">
            </el-col>
            <el-col :span="14" class="right">
                <el-button round size="small" :icon="Present" class="header-button">
                    新手任务
                </el-button>
                &emsp;
                <el-button round size="small" color="#FCC233" class="header-button">体验更高版本</el-button>
                &emsp;
                <el-dropdown>
                    <div class="dropdown-box">
                        <div class="dropdown-boxSon">
                            <span>admin</span>
                            <div class="dropdown-boxSon2">
                                <el-button size="small" round color="#feed37">超级管理员</el-button>
                            </div>
                        </div>
                        <div>
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </div>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="dialogFormVisible = true">
                                修改密码
                            </el-dropdown-item>
                            <el-dropdown-item @click="Quit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                &emsp;
                |
                &emsp;
                <el-button round size="small" color="#FCC233" class="header-button">系统升级</el-button>
                &emsp; &emsp; &emsp;
                <span class="header-icon">
                    <el-icon size="20px">
                        <Bell />
                    </el-icon>
                    &nbsp;
                    <el-icon size="20px">
                        <Service />
                    </el-icon>
                    &nbsp;
                    <el-icon size="20px">
                        <Timer />
                    </el-icon>
                </span>
            </el-col>
        </el-row>
        <!-- dialog 对话框 -->
        <el-dialog v-model="dialogFormVisible">
            <Form></Form>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, toRef } from 'vue'
import { Present } from '@element-plus/icons-vue'
// 引入 退出登录 接口
import { logout } from '@/api/login'
import { useRouter } from 'vue-router'
// 引入 dislog 组件 
import Form from '@/components/Form.vue'
// 引入 mitt
import emitter from '../utils/bus'
const router = useRouter()
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const isCollapse = ref(true)
// console.log('isCollapse', isCollapse);
const change = () => {
    if (isCollapse.value === true) {
        // console.log(123);
        emitter.emit('collapse', isCollapse.value)
        isCollapse.value = !isCollapse.value
    } else {
        // console.log(321);
        emitter.emit('collapse', isCollapse.value)
        isCollapse.value = true
    }
}
// 退出登录事件
function Quit() {
    ElMessageBox.confirm(
        '即将退出当前账号,是否继续？',
        '退出账号',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
            center: true,
            roundbutton: 'true',
            buttonsize: 'large'
        }
    )
        .then(() => {
            // 调用退出登录接口
            logout().then(res => {
                console.log('logout', res);
                // console.log(res.data.data);
                ElMessage({
                    type: 'success',
                    message: res.data.data,
                })
                localStorage.removeItem('pinia-user'),
                    router.push('/login')
            })

        })
        .catch(() => {

        })
    // console.log('退出登录');
    // 调用退出登录接口
    // logout().then(res=>{
    //     console.log('logout',res);
    // })
}
</script>
<style scoped lang="scss">
.header {
    // margin-top:6px;
    line-height: 66px;
    height: 60px;
}

.dropdown-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: space-around;
    font-size: 12px;
    height: 45px;
    line-height: 26px;
}

.right {
    text-align: right;
}

.dropdown-boxSon {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.header-button {
    background: linear-gradient(to top, yellow, #FCC233);
}
</style>